<template>
  <div>
    <!-- 头部搜索 -->
    <van-nav-bar class="navbar" fixed>
      <template #title>
        <van-button
          class="search-btn"
          round
          icon="search"
          @click="$router.push('/search')"
          >搜索</van-button
        >
      </template>
    </van-nav-bar>
    <!-- 文章 -->
    <van-tabs sticky offset-top="1.2267rem" v-model="active" swipeable>
      <van-tab v-for="item in myChannel" :key="item.id" :title="item.name">
        <ArticleList :id="item.id"></ArticleList>
      </van-tab>
      <!-- 更多 -->
      <span class="toutiao toutiao-gengduo1" @click="show = true"></span>
    </van-tabs>

    <!-- 频道弹层 -->
    <van-popup
      v-model="show"
      closeable
      close-icon-position="top-left"
      position="bottom"
      :style="{ height: '100%' }"
    >
      <channel-popup
        :myChannel="myChannel"
        @close="show = false"
        @change-active="active = $event"
        @del-channel="delChannels"
        @add-channel="addChannels"
      ></channel-popup>
    </van-popup>
  </div>
</template>

<script>
// as  给引入的函数重命名
import {
  getChannel as getChannelAPI,
  delChannels as delChannelsAPI,
  addChannelAPI,
  setMyChannelsToLocal,
  getMyChannelsByLocal
} from '@/api'
import ArticleList from './components/ArticleList'
import ChannelPopup from './components/ChannelPopup'
export default {
  name: 'Home',
  components: {
    ArticleList,
    ChannelPopup
  },
  data() {
    return {
      active: 0,
      myChannel: [],
      show: false
    }
  },
  created() {
    this.initMyChannel()
  },
  computed: {
    isLogin() {
      return !!this.$store.state.tokenObj.token
    }
  },
  methods: {
    // 两种状态下的mychannel数据读取
    initMyChannel() {
      // 登录状态下 发带token的请求读取服务器保存的用户数据
      if (this.isLogin) {
        this.getChannel()
      } else {
        // 未登录状态下
        // 读取当前的本地数据
        const myChannel = getMyChannelsByLocal()

        // 本地有的话用本地的数据
        if (myChannel) {
          this.myChannel = myChannel
        } else {
          // 本地没有  发送请求获取未带token的默认数据
          this.getChannel()
        }
      }
    },
    // 获取导航列表
    async getChannel() {
      try {
        const {
          data: { data }
        } = await getChannelAPI()
        // console.log(data)
        this.myChannel = data.channels
      } catch (error) {
        console.dir(error)
        this.$toast.fail('获取频道失败，请刷新')
      }
    },
    // 用token判断是否登录

    // 删除  登录和未登录状态下的
    async delChannels(id) {
      // 加载提示
      this.$toast.loading({
        message: '正在删除频道...',
        forbidClick: true
      })
      try {
        const newChannels = this.myChannel.filter((item) => item.id !== id)
        if (this.isLogin) {
          // 先删除服务器的数据
          await delChannelsAPI(id)
        } else {
          setMyChannelsToLocal(newChannels)
        }

        // 后删除页面数据
        this.myChannel = newChannels
        this.$toast.success('删除成功')
      } catch (err) {
        this.$toast.fail('删除失败')
      }
    },
    // 添加 登录和未登录状态下的
    async addChannels(channel) {
      // 加载提示
      this.$toast.loading({
        message: '正在添加频道...',
        forbidClick: true
      })

      try {
        if (this.isLogin) {
          await addChannelAPI(channel.id, this.myChannel.length)
        } else {
          setMyChannelsToLocal([...this.myChannel, channel])
        }

        this.myChannel.push(channel)
        this.$toast.success('添加成功')
      } catch (error) {
        this.$toast.fail('添加失败')
      }
    }
  }
}
</script>

<style scoped lang="less">
.navbar {
  background-color: #3296fa;
  :deep(.van-nav-bar__title) {
    max-width: unset;
  }

  :deep(.van-icon) {
    color: #fff;
  }
}

.search-btn {
  width: 7.4rem;
  height: 0.85333rem;
  background-color: #5babfb;
  color: #fff;

  &.van-button--default {
    border: 0.02667rem solid #5babfb;
  }
}
/* tabs导航条样式 */
:deep(.van-tabs__wrap) {
  padding-right: 66px;

  .van-tabs__nav {
    padding-left: 0;
    padding-right: 0;

    /* tab标签 */
    .van-tab {
      border: 1px solid #eee;
      width: 200px;
      height: 82px;
    }

    /* tab标签下划线 */
    .van-tabs__line {
      width: 31px;
      height: 6px;
      background-color: #3296fa;
      bottom: 40px;
    }
  }
}

/* 字体图标 */
.toutiao-gengduo1 {
  position: fixed;
  top: 92px;
  right: 0;
  width: 66px;
  height: 82px;
  font-size: 40px;
  line-height: 82px;
  text-align: center;
  // opacity: 0.6;
  border-bottom: 1px solid #eee;
  background-color: #fff;
  z-index: 999;

  &::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 70%;
    width: 1px;
    background-image: url('~@/assets/images/gradient-gray-line.png');
  }
}
:deep(.van-tabs__content) {
  // 符号的两侧必须由空格
  max-height: calc(100vh - 92px - 88px - 100px);
  padding-top: 100px;
  padding-bottom: 100px;
  overflow: auto;
}
</style>
